<template>
  <div class="app-container">
    <el-steps :active="2" finish-status="success">
      <el-step title="填写课程基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="最终发布"></el-step>
    </el-steps>
    <el-button type="text" @click="openChapterDialog()">添加章节</el-button>


    <!-- 中间是主体  章节下有小节 -->

    <div class="custom-tree-container">
      <div class="block">
        <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false"
                 :render-content="renderContent">
        </el-tree>

      </div>

      <div>
        <el-button @click="previous">上一步</el-button>
        <el-button type="primary" @click="next">下一步</el-button>
      </div>
    </div>
  </div>
</template>

<script>
let id = 1000;
export default {

  data() {

    const data = [{
      id: 1,
      label: '一级 1',
      children: [{
        id: 4,
        label: '二级 1-1',

      }]
    }, {
      id: 2,
      label: '一级 2',
      children: [{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 6,
        label: '二级 2-2'
      }]
    }, {
      id: 3,
      label: '一级 3',
      children: [{
        id: 7,
        label: '二级 3-1'
      }, {
        id: 8,
        label: '二级 3-2'
      }]
    }];
    return {
      data: JSON.parse(JSON.stringify(data))
    }
  },
  created() {
    //获取路由的id值
    console.log("======")
    console.log(this.$route.query.courseId)



  },

  methods: {
    next() {
      this.$router.push({ path: '/course/publish', query: { courseId: 1 } })
    },
    openVideo(data) {
      const { href } = this.$router.resolve({
        path: '/video'
      });
      window.open(href, '_blank');
    },
    append(data) {
      console.log(data)
      // const newChild = { id: id++, label: 'testtest', children: [] };
      // if (!data.children) {
      //     this.$set(data, 'children', []);
      // }
      // data.children.push(newChild);
    },

    remove(node, data) {
      console.log(node)
      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex(d => d.id === data.id);
      // children.splice(index, 1);
    },

    renderContent(h, { node, data, store }) {
      if (node.level == 1) {

        return (
          <span class="custom-tree-node">
                        <span>{node.label}</span>

                        <span>
                            <el-button size="mini" type="text" on-click={() => this.append(data)}>添加小节</el-button>
                            <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>删除</el-button>
                        </span>
                    </span>);

      } else {
        return (
          <span class="custom-tree-node">
                        <span>{node.label}</span>
                        <span>
                            <el-button size="mini" type="text" on-click={() => this.openVideo(data)}>预览</el-button>
                            <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>删除</el-button>
                        </span>

                    </span>);
      }

    }
  }

}

</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
